<template>
  <view class="content">
	  <u-navbar :is-back="false" title="拜访记录列表"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
    <order-item :li="user"></order-item>
    <view class="topheader u-skeleton">
      <view class="titel">拜访对象</view>
      <view class="titel u-skeleton-fillet" style="padding-top: 0;">
        {{user.fContact}} </view>
    </view>
    <view class="topheader">
      <view class="titel">商品陈列图<text style="color:#999">（上传前）</text></view>
      <view class="imglist u-skeleton-fillet">
        <image v-for="(v,i) in info.fProudctPic " :key="i" class="" :src="v" @click="beforeImg(i)">
        </image>
      </view>
    </view>
    <view class="topheader" style="border: 0;">
      <view class="titel">员工照片</view>
      <view class="imglist u-skeleton-fillet" @click="beforeImg(info.fUserPic)">
        <image :src="info.fUserPic"></image>
      </view>
    </view>
    <view style="background: #f8f8f8; height:16upx ;"></view>
    <view class="viebox">
      <navigator :url="'./merchant_inventory?action=detail&id='+id" hover-class="none"
        class="x-row">
        <view class="listtop">商家库存</view>
        <view class="x-col"></view>
        <u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
      </navigator>
    </view>
    <view class="viebox">
      <navigator :url="'./ontime_products?action=detail&id='+id" hover-class="none" class="x-row">
        <view class="listtop">临期商品</view>
        <view class="x-col"></view>
        <u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
      </navigator>
    </view>
    <navigator :url="'./specialtreatmentproducts?source=detail&bid='+info.bid+'&id='+info.id"
      hover-class="none">
      <view class="viebox x-row">
        <view class="listtop">特殊处理产品</view>
        <view class="x-col"></view>
        <u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
      </view>
    </navigator>
    <navigator :url="'./productstobepurchased?source=detail&bid='+info.bid+'&id='+info.id"
      hover-class="none" class="">
      <view style="background: #f8f8f8; height:16upx ;"></view>
      <view class="viebox x-row">
        <view class="listtop">需进货产品</view>
        <view class="x-col"></view>
        <u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
      </view>
    </navigator>
    <navigator :url="'./exchangeproducts?source=detail&bid='+info.bid+'&id='+info.id"
      hover-class="none" class="">
      <view class="viebox x-row">
        <view class="listtop">兑换产品</view>
        <view class="x-col"></view>
        <u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
      </view>
    </navigator>
    <view class="topheader">
      <view class="titel">商品陈列图<text style="color:#999">（上传后）</text></view>
      <view class="imglist ">
        <image v-for="(v,i) in info.fProudctPic2 " :key="i" class="" :src="v" @click="beforeImg(i)">
        </image>
      </view>
    </view>
  </view>
</template>

<script>
import orderItem from '@/components/order-item'
export default {
  components: {
    orderItem
  },
  data() {
    return {
      fTaskId: null,
      id: '',
      info: {},
      user: {},
      img: this.urlimg,
      loading: true
    }
  },
  onLoad(e) {
    this.id = e.id
    this.fTaskId = e.fTaskId
    this.getInfo()
    this.$axios('api/MrkBasic/GetDetail', 'post', { value: e.fMrkId }).then(res => {
      if (res.Value) {
        this.user = res.Value
      }
      this.loading = false
    })
  },
  methods: {
    beforeImg(url) {
      uni.previewImage({
        current: url,
        urls: [url]
      })
    },
    getInfo() {
      let that = this
      if (this.fTaskId) {
        this.$axios('api/UserVisit/GetDetailByTaskId', 'post', { value: this.fTaskId }).then(res => {
          this.info = res.Value
        })
      } else {
        this.$axios('api/UserVisit/GetDetail', 'post', { value: this.id }).then(res => {
          let img = this.urlimg
          res.Value.fProudctPic = res.Value.fProudctPic.split(',').map(x => img + x)
          res.Value.fProudctPic2 = res.Value.fProudctPic2.split(',').map(x => img + x)
          res.Value.fUserPic = res.Value.fUserPic.split(',').map(x => img + x)
          that.info = res.Value
          console.log('🚀 ~ file: visit_records_data.vue ~ line 120 ~ this.$axios ~ that.info', that.info)
        })
      }
    }
  }
}
</script>

<style scoped>
.topheader {
  padding: 0 32upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.titel {
  color: #34404a;
  font-size: 32upx;
  padding: 32upx 0;
}
.imglist {
  padding-bottom: 30upx;
  overflow: hidden;
}
.imglist image {
  width: 160upx;
  height: 160upx;
  float: left;
  margin-right: 20upx;
}
.viebox {
  color: #34404a;
  font-size: 32upx;
  padding: 0 32upx;
  line-height: 110upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
</style>
